<!DOCTYPE html>
<html>
<head>
  <title>A Vue.js Calculator</title>
  <style>
    p, input { font-family: monospace; }
    p { white-space: pre; }
  </style>
</head>
<body>
  <div id="app">
    <p>x <input v-model="x"></p>
    <p>y <input v-model="y"></p>
    <p>---------------------</p>
    <p>= <span v-text="result"></span></p>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
  function isNotNumericValue(value) {
    return isNaN(value) || !isFinite(value);
  }
    var calc = new Vue({
      el: '#app',
      data: { x: 0, y: 0, lastResult: 0 },
      computed: {
        result: function() {
          let x = parseFloat(this.x);
          if(isNotNumericValue(x))
          return this.lastResult;

          let y = parseFloat(this.y);
          if(isNotNumericValue(y))
          return this.lastResult;

          this.lastResult = x + y;

          return this.lastResult;
        }
      }
    });
  </script>
</body>
</html>
